<template>
  <div class="page-header">
    <div class="header-left">
      <div class="left-box link ml24" @click="handleBack">
        <img src="https://p3-passport.byteimg.com/img/user-avatar/5537a4d6dd97d28c5478d5be66bc9ab6~100x100.awebp" alt="" />
        <span class="user-name ml12">{{ store.state.userName }}</span>
      </div>
    </div>
    <div class="flex align-center">
      <i class="iconfont icon-zu15462" style="color: #ffffff; font-size: 25px" />
      <h1 class="title">您已进入监控区域！</h1>
    </div>
    <div class="flex-between">
      <!-- 全屏 -->
      <el-icon class="mr24 link" :size="24" color="#FFFFFF" @click="handleScreenFull">
        <FullScreen />
      </el-icon>
      <el-icon class="mr24 link" :size="24" color="#FFFFFF" @click="handleLoginOut">
        <SwitchButton />
      </el-icon>
      <!-- <el-button type="primary" class="fr mr24" @click="handleLoginOut">退出</el-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { onBeforeUnmount, onMounted } from 'vue'
import screenfull from 'screenfull'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()
// 全屏
const handleScreenFull = () => {
    if (!screenfull.isEnabled) {
        ElMessage.warning('不支持全屏!')
        return false
    }
    screenfull.toggle()
}
const init = () => {
    if (screenfull.isEnabled) {
    // screenfull.on('change', change)
    }
}
const destroy = () => {
    if (screenfull.isEnabled) {
    // screenfull.off('change', change)
    }
}
// 回到分类页
const handleBack = () => {
    router.push('/typeHome')
}
// 退出
const handleLoginOut = () => {
    ElMessageBox.confirm('确定要退出吗？', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            router.push('/login')
            localStorage.clear()
        })
        .catch(() => {
            //
        })
}
import mittBus from '@/utils/mitt'

onMounted(() => {
    init()
    mittBus.on('fashe', res => {
        console.log(res)
    })
})
onBeforeUnmount(() => {
    destroy()
})
</script>

<style lang="less" scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    .left-box {
      display: flex;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .user-name {
        color: #fff;
      }
    }
  }

  .title {
    color: @main-color;
    line-height: 60px;
    margin-left: 10px;
  }
}
</style>
